<template>
  <div id="app">
    <DemoNavigation 
      :current-demo="demoStore.state.currentDemo" 
      :collapsed="demoStore.state.isNavigationCollapsed"
      @demo-selected="handleDemoSelection" 
      @toggle-collapse="demoStore.toggleNavigation"
    />
    <div class="main-content">
      <el-button 
        class="collapse-button" 
        @click="demoStore.toggleNavigation"
        :class="{ collapsed: demoStore.state.isNavigationCollapsed }"
        :style="{ left: demoStore.state.isNavigationCollapsed ? '20px' : '335px' }"
        circle
      >
        {{ demoStore.state.isNavigationCollapsed ? '▶' : '◀' }}
      </el-button>
      <div 
        class="demo-container" 
        :class="{ 'with-source-code': demoStore.state.showSourceCode }"
      >
        <transition name="fade">
          <div v-if="demoStore.isComponentLoading(demoStore.state.currentDemo)" class="loading">
            Loading demo...
          </div>
        </transition>
        
        <component 
          :is="demoStore.state.demoComponents[demoStore.state.currentDemo]" 
          v-if="demoStore.state.demoComponents[demoStore.state.currentDemo]"
          :key="demoStore.state.currentDemo"
          :class="{ 'with-collapsed-nav': demoStore.state.isNavigationCollapsed }"
        />
        
        <transition name="fade">
          <div v-if="demoStore.state.componentLoadError" class="loading error">
            <p>{{ demoStore.state.componentLoadError }}</p>
            <p v-if="demoStore.state.currentDemo">错误发生在演示组件: {{ demoStore.state.currentDemo }}</p>
            <p>错误代码: C001</p>
            <p>建议: 检查网络连接或联系技术支持</p>
          </div>
        </transition>
      </div>
      
      
      <div 
        v-if="demoStore.state.showSourceCode" 
        class="source-code-container" 
      >
        <div class="source-code-header">
          <h3>{{ demoStore.currentDemoInfo.name }} - Source Code</h3>
          <el-button @click="demoStore.closeSourceCode" :icon="Close" circle />
        </div>
        
        <!-- 多标签页展示源码文件 -->
        <div v-if="demoStore.isSourceCodeLoading()" class="source-code-loading">
          Loading source code...
        </div>
        <div v-else class="source-code-content-container">
          <div class="source-code-tabs">            <el-tabs v-model="activeSourceFileIndex" type="card" @tab-click="handleTabClick">
              <el-tab-pane 
                v-for="(file, index) in demoStore.formattedSourceCodeFiles" 
                :key="index"
                :label="file.name"
                :name="index.toString()"
              >
                <pre class="source-code-content">{{ file.formattedContent }}</pre>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
    
    <DemoInfo 
      :current-demo="demoStore.state.currentDemo" 
      @view-source-code="handleShowSourceCode"
    />
  </div>
</template>

<script>
import DemoNavigation from './components/DemoNavigation.vue';
import DemoInfo from './components/DemoInfo.vue';
import demoStore from './store/demoStore.js';
import { Close } from '@element-plus/icons-vue';
import { ref, watch, onMounted } from 'vue';

export default {
  name: 'App',
  components: {
    DemoNavigation,
    DemoInfo
  },
  setup() {
    // 用于跟踪当前激活的源码文件索引
    const activeSourceFileIndex = ref('0');
    
    // 监听store中的activeSourceFile变化
    watch(() => demoStore.state.activeSourceFile, (newIndex) => {
      activeSourceFileIndex.value = newIndex.toString();
    });
    
    // 监听标签页切换
    const handleTabClick = (tab) => {
      demoStore.switchSourceFile(parseInt(tab.paneName));
    };
    
    const handleDemoSelection = async (demoId) => {
      demoStore.selectDemo(demoId);
      
      // Load the component if not already loaded
      try {
        await demoStore.loadDemoComponent(demoId);
        // Clear the previous error if any
        demoStore.state.componentLoadError = null;
      } catch (error) {
        console.error('Failed to load demo component:', error);
        // Set user-friendly error message
        demoStore.state.componentLoadError = '无法加载演示组件，请尝试重新加载页面或联系支持人员';
      }
    };

    // 确保初始演示组件被加载
    onMounted(async () => {
      // 等待demo数据加载完成
      const checkDemosLoaded = async () => {
        if (demoStore.state.demos && demoStore.state.demos.length > 0) {
          if (demoStore.state.currentDemo) {
            await handleDemoSelection(demoStore.state.currentDemo);
          }
        } else {
          // 如果数据还没加载完成，稍后再检查
          setTimeout(checkDemosLoaded, 100);
        }
      };
      
      // 开始检查
      checkDemosLoaded();
    });
    
    const handleShowSourceCode = async () => {
      await demoStore.loadAllSourceCodeFiles(demoStore.state.currentDemo);
    };

    return {
      demoStore,
      Close,
      activeSourceFileIndex,
      handleTabClick,
      handleDemoSelection,
      handleShowSourceCode
    };
  }
};
</script>

<style>
  
/* 添加的过渡效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
  
.fade-enter, .fade-leave-to {
  opacity: 0;
}
html, body, #app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#app {
  display: flex;
}

.main-content {
  flex: 1;
  display: flex;
  height: 100vh;
  margin-top: 0;
  position: relative;
}

.demo-container {
  flex: 1;
  height: 100%;
  position: relative;
  transition: flex 0.3s ease;
}

.demo-container.with-source-code {
  flex: 0 0 60%;
}

.source-code-container {
  background: #1e1e1e;
  color: #d4d4d4;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-left: 1px solid #444;
  box-sizing: border-box;
  min-width: 300px;
  flex: 0 0 40%;
  transition: flex 0.3s ease;
}

.source-code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: #333;
  border-bottom: 1px solid #555;
  color: white;
}

.source-code-content-container {
  height: calc(100% - 60px);
  overflow: hidden;
}

.source-code-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.source-code-tabs :deep(.el-tabs) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.source-code-tabs :deep(.el-tabs__content) {
  flex: 1;
  overflow: auto;
}

.source-code-tabs :deep(.el-tab-pane) {
  height: 100%;
}

.source-code-content {
  height: 100%;
  margin: 0;
  padding: 15px;
  box-sizing: border-box;
  overflow: auto;
}

.collapse-button {
  position: absolute;
  top: 20px;
  z-index: 1001;
  transition: left 0.3s ease;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 18px;
}
</style>